<template>
  <div class="card-theme-1 h-full w-full relative" :class="{reverse:reverse}">
    <Container >
      <div class="card-theme-1-content h-full w-full relative" >
        <div class="header">
          <div class="title">{{ title }}</div>
        </div>
        <div class="content">
          <slot ></slot>
        </div>
      </div>
    </Container>
  </div>
</template>

<script lang="ts" setup>
import Container from "./_container.vue";

defineProps<{
  // 标题
  title?:string,
  // 是否翻转
  reverse?:boolean
}>();
</script>

<style lang="scss">
.card-theme-1{
  &.reverse{
    .svg-container{
      transform: rotateY(180deg);
    }
    .card-theme-1-content{
      > .header {
        justify-content: flex-start;
        .title{
          padding-right: 0px;
          padding-left: 60px;
        }
      }
    }
  }
  .card-theme-1-content{
    display: flex;
    flex-direction: column;
    > .header{
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #fff;
      .title{
        width: 60%;
        text-align: center;
        padding-right: 60px;
      }
    }
    > .content{
      flex: 1;
      //background-color: pink;
    }
  }
}
</style>
